<template>
  <div class="index" v-loading.fullscreen.lock="bodyloading">
    <div class="main">
      <div>
        <p class="tit">门店名称：</p>
        <p>{{ queryform.mdname }}</p>
      </div>
      <div>
        <p class="tit">门店编码：</p>
        <p>{{ queryform.mdcode }}</p>
      </div>
      <div>
        <p class="tit">小微：</p>
        <p>{{ queryform.xwname }}</p>
      </div>
      <div>
        <p class="tit">渠道：</p>
        <p>{{ queryform.qdname }}</p>
      </div>
      <div>
        <p class="tit">产业：</p>
        <p>{{ queryform.cyname }}</p>
      </div>
      <div>
        <p class="tit">活动主题：</p>
        <p>{{ queryform.ztname }}</p>
      </div>
    </div>
    <div class="prdlist">
      <div v-for="(item, index) in queryform.list" :key="item.modelCode">
        <div class="top">
          <van-icon name="delete-o" @click="delteitem(index)" />
          <div class="img">
            <img :src="item.picAddr" alt="" />
          </div>
          <div class="text">
            <p class="tit">{{ item.modelName }}</p>
            <p class="code">{{ item.modelCode }}</p>
            <p class="desc">物料描述：{{ item.modelDis }}</p>
          </div>
        </div>
        <div class="bottom" v-show="item.checked">
          <p>申请数量</p>
          <van-stepper v-model="item.number" min="1" integer />
        </div>
      </div>
    </div>
    <div class="address">
      <p class="tit">收货地址</p>
      <p class="7a">门店7A地址：{{ queryform.address }}</p>
      <p class="waring">地址为MDM地址仅供参考，请根据实际地址修改</p>
      <div class="list">
        <van-field
          v-model="username"
          name="收件人"
          label="收件人："
          placeholder="请输入收件人"
        />
        <van-field
          v-model="phone"
          type="number"
          name="收件人电话"
          label="收件人电话："
          placeholder="请输入收件人电话"
        />
        <van-field
          v-model="address"
          name="收件地址"
          label="收件地址："
          placeholder="请选择收件地址"
          readonly
          @click="addressshow"
        />
        <van-field
          v-model="detailaddress"
          rows="2"
          autosize
          label="详细地址："
          type="textarea"
          placeholder="请输入详细地址"
        />
      </div>
    </div>
    <div class="btnbox" v-if="queryform.ztcode != ''">
      <p class="waring">*注：提交前请确认必填项都已填写，所需物料都已提报</p>
      <van-button type="info" @click="onSubmit">提交</van-button>
    </div>
    <van-popup v-model="show" position="center"
      ><van-area
        title="请选择地址"
        :area-list="areaList"
        @cancel="addresscancel"
        @confirm="addressconfirm"
    /></van-popup>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { areaList } from "@vant/area-data";
import {
  materialsApplyInfo,
  materialsApplyDetails,
  lastTimeReceiveAddress,
} from "../../api/app.js";
export default {
  name: "Index",
  components: {},

  data() {
    return {
      header: {
        show: true,
        return: true,
        search: false,
        title: "营销物料需求确认",
        home: "/index",
        close: true,
      },
      bodyloading: false,
      queryform: {},
      isHome: false,
      number: 0,
      username: "",
      phone: "",
      address: "",
      show: false,
      areaList,
      province: { code: "", name: "" },
      city: { code: "", name: "" },
      county: { code: "", name: "" },
      detailaddress: "",
      applyId: this.$route.query.applyId ? this.$route.query.applyId : "",
    };
  },

  created() {
    if (sessionStorage.getItem("indexlist")) {
      this.queryform = JSON.parse(sessionStorage.getItem("indexlist"));
      this.bodyloading = false;
    }
    // console.log(this.queryform);
    if (this.applyId) {
      this.getdetail();
    } else {
      this.getlastTimeReceiveAddress();
    }
  },
  mounted() {},

  methods: {
    getlastTimeReceiveAddress() {
      let that = this;
      let json = {
        custCode: this.queryform.mdcode,
      };
      lastTimeReceiveAddress(json).then((res) => {
        // console.log(res);
        if (res.code == 200 && res.data != null) {
          that.detailaddress = res.data.receiveDetailsAddress; //详细地址
          that.province.code = res.data.receiveProvinceCode; //省份编码
          that.province.name = res.data.receiveProvinceName; //省份名称
          that.city.code = res.data.receiveCityCode; //城市编码
          that.city.name = res.data.receiveCityName; //城市名称
          that.county.code = res.data.receiveCountyCode; //区县编码
          that.county.name = res.data.receiveCountyName; //区县名称
          that.address = that.province.name + that.city.name + that.county.name;
        }
      });
    },
    getdetail() {
      let that = this;
      this.bodyloading = true;
      let json = {
        applyId: this.applyId,
      };
      materialsApplyDetails(json).then((res) => {
        // console.log(res);
        if ((res.code = 200)) {
          let materialsApply = res.data.materialsApply;
          that.bodyloading = false;
          that.username = materialsApply.receiveUserName;
          that.phone = materialsApply.receiveUserPhone;
          that.detailaddress = materialsApply.receiveDetailsAddress; //详细地址
          that.province.code = materialsApply.receiveProvinceCode; //省份编码
          that.province.name = materialsApply.receiveProvinceName; //省份名称
          that.city.code = materialsApply.receiveCityCode; //城市编码
          that.city.name = materialsApply.receiveCityName; //城市名称
          that.county.code = materialsApply.receiveCountyCode; //区县编码
          that.county.name = materialsApply.receiveCountyName; //区县名称
          that.address = that.province.name + that.city.name + that.county.name;
        }
      });
    },
    addressshow() {
      this.show = true;
    },
    addresscancel() {
      this.show = false;
    },
    addressconfirm(val) {
      // console.log(val);
      this.province = val[0];
      this.city = val[1];
      this.county = val[2];
      this.address = this.province.name + this.city.name + this.county.name;
      this.show = false;
    },
    delteitem(index) {
      if (this.queryform.list.length == 1) {
        this.$toast("请至少保留一个物料");
        return false;
      }
      Dialog.confirm({
        title: "警告",
        message: "确认要删除该条数据吗",
      })
        .then(() => {
          this.queryform.list.splice(index, 1);
        })
        .catch(() => {
          // on cancel
        });
    },
    onSubmit() {
      let that = this;
      // console.log(this.queryform);
      let jsonedit = "";
      if (this.applyId) {
        jsonedit = {
          applyId: this.applyId,
          status: "1", //状态 0保存 1更新
        };
      } else {
        jsonedit = {
          status: "0", //状态 0保存 1更新
        };
      }
      let json = {
        ...jsonedit,
        applySystem:"Hwork",
        address: this.queryform.address, //7A地址
        channelCode: this.queryform.qdcode, //渠道编码
        channelName: this.queryform.qdname, //渠道名称
        custCode: this.queryform.mdcode, //门店编码
        custName: this.queryform.mdname, //门店名称
        industryCode: this.queryform.cycode, //产业编码
        industryName: this.queryform.cyname, //产业名称
        materialsInfo: this.queryform.list, //物料列表
        receiveProvinceCode: this.province.code, //省份编码
        receiveProvinceName: this.province.name, //省份名称
        receiveCityCode: this.city.code, //城市编码
        receiveCityName: this.city.name, //城市名称
        receiveCountyCode: this.county.code, //区县编码
        receiveCountyName: this.county.name, //区县名称
        receiveDetailsAddress: this.detailaddress, //详细地址
        receiveUserName: this.username, //收件人
        receiveUserPhone: this.phone, //收件人电话
        themeCode: this.queryform.ztcode, //主题编码
        themeName: this.queryform.ztname, //主题名称
        tradeCode: this.queryform.xwcode, //小微编码
        tradeName: this.queryform.xwname, //小微名称
        cdepCode: this.queryform.cdepcode, //网格小微编码
        cdepName: this.queryform.cdepname, //网格小微名称
      };
      // console.log(json);
      if (json.receiveUserName == "") {
        this.$toast("请输入收件人");
        return false;
      }
      if (
        json.receiveUserPhone == "" ||
        !/^1[3456789]\d{9}$/.test(json.receiveUserPhone)
      ) {
        this.$toast("请输入正确收件人电话号码，不支持座机");
        return false;
      }
      if (
        json.receiveProvinceCode == undefined ||
        json.receiveCityCode == undefined ||
        json.receiveCountyCode == undefined
      ) {
        this.$toast("请选择收件地址");
        return false;
      }
      if (json.receiveDetailsAddress == "") {
        this.$toast("请输入详细地址");
        return false;
      }
      this.bodyloading = true;
      materialsApplyInfo(json).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          setTimeout(function () {
            that.$router.push({
              name: "Index",
              query: {
                state: "004",
              },
            });
          }, 1000);
        }
        that.bodyloading = false;
        that.$toast(res.msg);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.index {
  font-size: 0.14rem;
  > div {
    width: 95vw;
    margin: 0 auto;
    border-radius: 0.03rem;
    background-color: #fff;
    margin-bottom: 0.1rem;
  }
  .qs {
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    padding: 0.1rem;
    box-sizing: border-box;
  }
  .main {
    > div {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      height: 0.4rem;
      padding: 0 0.15rem;
      box-sizing: border-box;
      s {
        text-decoration: none;
        color: red;
      }
      .icon {
        position: absolute;
        font-size: 0.14rem;
        position: absolute;
        right: 0.05rem;
      }
    }
  }
  .prdlist {
    background: none;
    > div {
      padding: 0.1rem;
      box-sizing: border-box;
      border-radius: 0.03rem;
      background-color: #fff;
      margin-bottom: 0.1rem;
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        >>> .van-checkbox {
          width: 0.2rem;
          height: 0.2rem;
        }
        .img {
          width: 0.7rem;
          height: 0.7rem;
          img {
            width: 100%;
            height: 100%;
            display: flex;
          }
        }
        .text {
          width: 2.3rem;
          p {
            margin: 0;
          }
          .tit {
            color: #f40;
          }
          .code {
            color: #666;
            font-size: 0.12rem;
            margin: 0.05rem 0;
          }
          .desc {
            color: #333;
          }
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
          margin: 0;
        }
      }
    }
  }

  .btnbox {
    background: none;
    p {
      width: 100%;
    }
    .waring {
      font-size: 0.12rem;
      color: red;
    }
    .sum {
      text-align: right;
    }
    .van-button {
      width: 100%;
      display: block;
      height: 0.4rem;
      border-radius: 0.4rem;
      color: #fff;
      text-align: center;
      line-height: 0.4rem;
      margin-top: 0.05rem;
      background-color: #2698eb;
    }
  }
  .address {
    p {
      width: 95%;
      margin: 0 auto;
      display: block;
      line-height: 0.2rem;
      font-size: 0.12rem;
    }
    .tit {
      font-size: 0.14rem;
      height: 0.3rem;
      line-height: 0.3rem;
    }
    .waring {
      color: #ff9933;
    }
  }
  .van-popup--bottom {
    width: 100vw;
    margin-bottom: 0;
  }
}
</style>
